<head>
  <link href="pagination.css" rel="stylesheet" type="text/css">
  <style type="text/css">
    ul, li {
        list-style: none;
    }

    #wrapper {
        width: 900px;
        margin: 20px auto;
    }

    .data-container {
        margin-top: 20px;
    }

    .data-container ul {
        padding: 0;
        margin: 0;
    }

    .data-container li {
        margin-bottom: 5px;
        padding: 5px 10px;
        background: #eee;
        color: #666;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <section>
      <div class="data-container"></div>
      <div id="demo"></div>
    </section>
  </div>
  <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="pagination.js"></script>
  <script>
    // pagination implemented using http://pagination.js.org/
    $(function() {
      $('#demo').pagination({
        dataSource: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
        pageSize: 5,
        showPageNumbers: false,
        showNavigator: true,
        className: 'paginationjs-theme-blue paginationjs-big',
        callback: function(data, pagination) {
          const html = data.map(d => `<li>${d}</li>`)
          $('.data-container').html(html);
        }
    })
  })
  </script>
</body>
